<template>
	<view class="detail">
		<view class="detail-title">
			
		</view>
		<view class="detail-header">
			<view class="detail-header_logo">
				<image src="../../static/lyy.jpg" mode="aspectFill"></image>
				<!-- <image :src="formData.author.avatar" alt='加载中' mode="aspectFill"></image> -->
			</view>
			<view class="detail-header_content">
				<view class="detail-header_content-title">
					{{formData.author.author_name}}
				</view>
				
				<view class="detail-header_content-info">
					<text>{{formData.create_time}}</text>
					<text>{{formData.browse_count}}浏览</text>
					<text>{{formData.thumbs_up_count}}赞</text>
				</view>
			</view>
			
			<button class="detail-header_button" type="default" @click="follow(formData.author.id)">{{formData.is_author_like ? "取消关注" : "请关注"}}</button>
		</view>
		<view class="detali-content">
			<view class='detail-html'>
				<!-- 内容 u-parse富文本 -->
				<u-parse :content="formData.content" :noData="noData"></u-parse>
			</view>
			<view class="detail-comment">
				<view class="comment_title">最新评论</view>
				<view class="comment-content" v-for="(item,index) in commentsList" :key="item.comment_id">
					<comments-box :comments="item"  @reply="reply"></comments-box>
				</view>
			</view>
		</view>
		<!-- 底部操作模块 -->
		<detail-bottom ref="detailBottom" :formData="formData" @UpdateComment="UpdateComment" :jump="jump"></detail-bottom>
		
		
	</view>
</template>

<script>
	import uParse from "@/components/gaoyia-parse/parse.vue"//富文本插件
	
	
	export default {
		components:{
			uParse
		},
		data() {
			return {
				formData:{},
				jump:null,
			    noData:'<p style="text-align:center,color:#666">详情加载中...</p>',
				//输入框的值
				commentsValue:'',//--
				commentsList:[],
				replyFormData:{},
			}
		},
		onLoad(query) {
			this.jump = query.params
			console.log('this.jump',this.jump)
			this.formData=JSON.parse(query.params),
			console.log('this.formData',this.formData)
			this.getDetail()
			this.getComments()
		},
		computed:{
			
		},
		onReady(){
			
		},
		
		watch:{
			jump:(newVal)=>{
				console.log('jump-newVal',newVal)
				return newVal
			},
			formData:(newVal)=>{
				console.log('formData-newVal',newVal)
				return newVal
			},
		},
		methods: {
			//关注
			follow(author_id){
				console.log("关注")
				console.log(author_id)
				this.setUpdateAuthor(author_id)
				
			},
			
			//发布
			UpdateComment(commentsValue){
				console.log("触发评论内容更新")
				console.log(commentsValue)
				this.setUpdateComment({content:commentsValue, ...this.replyFormData})
				this.getComments()
				// this.$refs.popup.close()
			},
			
			//回复
			reply(e){
				// console.log("回复")
				this.replyFormData={
					"comment_id":e.comments.comment_id,
					"is_reply":e.is_reply
				}
				// console.log(this.replyFormData.comment_id)
				if(e.comments.reply_id){
					this.replyFormData.reply_id = e.comments.reply_id
				}
				// console.log(e)
				console.log( this.replyFormData)
				// this.openComment()
				this.$refs.detailBottom.openComment()
				
			},
			//更新评论
			setUpdateComment(content){
				const formdata ={
					article_id:this.formData._id,
					...content
				}
				
				uni.showLoading()
				this.$api.update_comment(formdata).then((res)=>{
					// console.log(res)
					uni.hideLoading()
					uni.showToast({
						title:"已经发布",
					})
				
					this.getComments()
					// this.close()
					this.replyFormData = {}//避免上次请求影响当下请求
				})
			},
			//获取详情信息
			getDetail(){
				this.$api.get_detail({
					article_id:this.formData._id
				}).then((res)=>{
				const {data} = res
				this.formData = data
					console.log(res)
				})
			},
			//请求评论内容
			getComments(){
				console.log("触发评论内容")
				this.$api.get_comments({
					article_id:this.formData._id
				}).then((res)=>{
					console.log(res)
					const {data} = res
					this.commentsList = data
				})
			},
			//关注作者
			setUpdateAuthor(author_id){
				uni.showLoading()
				// console.log(author_id)
				// console.log(author_id.author.id)
				this.$api.update_author({
					author_id
				}).then(res =>{
					uni.hideLoading()
					this.formData.is_author_like =! this.formData.is_author_like
					//点击关注触发关注页面信息刷新
					uni.$emit("update_author")
					uni.showToast({
						title:this.formData.is_author_like? "关注作者成功":"取消关注作者",
						icon:"none"
					})
					console.log(res)
				
				})
			},
			
		}
	}
</script>

<style lang="scss">
.detail{
	padding: 15px 0;
	padding-bottom: 54px;
	
	.detail-title{
		padding:0 15px;
		font-size: 18px;
		font-weight: bold;
		color:#333;
	}
	.detail-header{
		display:flex;
		flex-direction: row;
		align-items: center;
		margin-top:10px;
		padding:0 15px;
		
		.detail-header_logo{
			flex-shrink: 0;
			width:40px;
			height:40px;
			border-radius: 50%;
			overflow: hidden;
			border:1px solid $mk-base-color;
			
			image{
				width:100%;
				height:100%;
			}
		}
		.detail-header_content{
			width: 100%;
			padding-left: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size:12px;
			
			.detail-header_content-title{
				font-size: 14px;
				color:#333;
			}
			.detail-header_content-info{
				color:#999;
				
				text{
					margin-right: 10px;
				}
			}
		}
		.detail-header_button{
			flex-shrink:0;
			heigth:30px;
			padding: 0 15px;
			// line-height: 30px;
			border-radius: 5px;
			font-size: 12px;
			background-color: $mk-base-color;
			color:#fff;
		}
	}
	.detali-content{
		margin-top:20px;
		min-height:500px;
		
		.detail-html{
			padding:0 15px;
		}
		.detail-comment{
			margin-top:30px;
			
			.comment_title{
				padding:10px 15px;
				font-size: 14px;
				color:#666;
				border-bottom:1px #f5f5ff solid;
			}
			.comment-content{
				padding:0 15px;
				border-top:2px #eee solid;
			}
		}
	}
	
}


</style>
